<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>弹幕</title>
    <script src="jquery.js"></script>
    <style>
        *{
            padding: 0;
            margin: 0;
            box-sizing: border-box;
        }
        #box{
            height:700px;
            width:1000px;
            margin: 50px auto;
            border:1px solid #000000;
            position: relative;
        }
        #main{
            width:100%;
            height:605px;
            position: relative;
            overflow: hidden;
        }
        p{
            position: absolute;
            left:1000px;
            width:200px;
            top:0;
        }
        #bottom{
            width:100%;
            height:80px;
            background: #ABCDEF;
            text-align: center;
            /*padding-top: 15px;*/
            line-height: 80px;
            position: absolute;
            left: 0;
            bottom: 0;
        }
        #txt{
            width:300px;
            height:50px;
        }
        #btn{
            width:100px;
            height:50px;
        }
    </style>
</head>
<body>
<div id="box">
    <div id="main">

    </div>
    <div id="bottom">
        <input type="text" id="txt" placeholder="请输入内容" />
        <input type="button" id="btn" value="发送" />
    </div>
</div>
<script>
    $(function(){
        var height=$("#main").outerHeight();
        var colorArr=["#cfaf12","#12af01","#981234","#adefsa","#db6be4","#f5264c","#d34a74"];
//        bind()为被选元素添加一个或多个事件处理程序
        $("#btn").bind("click",show);
        document.onkeydown=function(ev){
//            按下enter按钮时触发
            if(ev.keyCode == 13){
                show();
            }
        };
        function show(){
            var value = $("#txt").val();
            $("#main").append("<p>" + value + "</p>");
            $("#txt").val("");
            var p_top = height*(Math.random());
            var num = parseInt(colorArr.length*(Math.random()));
            $("p:last-child").css({"top":p_top,"color":colorArr[num],"font-size":"20px"});
            $("p:last-child").stop().animate({"left":"-300px"},10000,"linear",function(){
                $(this).remove();
                  console.log(this)
            });
        }
    })
</script>
</body>

</html>